<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 用户中心</el-breadcrumb-item>
            </el-breadcrumb>
           
          

        </div>
        <div class="handle-box">
            <!-- <el-button type="primary"   icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
            
            <el-select v-model="select_cate" placeholder="发货状态" class="handle-select mr10">
                <el-option label="全部状态" value="0"></el-option>
                <el-option v-for="(type_item,index) in [{name:'已发货',value:2},{name:'未发货',value:1}]"  :label="type_item.name" :value="type_item.value"></el-option>
            </el-select>
            <el-input v-model="select_word" placeholder="昵称/真实姓名/手机号" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="getData">搜索</el-button>

             <el-button style="margin-top:20px;margin-left:0;" type="default"   icon="upload" class="handle-del mr10" @click="expendToExcel">导出到excel</el-button>
        </div>
        <el-table :data="newsCenter" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="a_type_name" label="昵称(姓名)" :formatter="setUname"  width="120">
            </el-table-column>
                  <el-table-column prop="u_tel"  sortable  label="联系方式"  width="150">
            </el-table-column>
            
                <el-table-column prop="u_tel" :formatter="setPosition"   sortable  label="区域">
            </el-table-column>
             <el-table-column  prop="u_tel"  :formatter="setSendStau"  label="发货状态" width="200"> 
           
            </el-table-column>
         
            <el-table-column label="操作" width="120" >
                <template scope="scope">
                   
                    <el-button size="small"
                            @click="handleEdit(scope.row)">立即发货</el-button>
                    <!-- <el-button size="small" type="danger"
                            @click="handleDelete(scope.row)">删除</el-button> -->

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="all_page">
            </el-pagination>
        </div>


<el-dialog title="发货操作" :visible.sync="setURemark">
  <el-form label-width="100px">
    <el-form-item label="姓名：">
     {{uShowName}}
    </el-form-item>
    <el-form-item label="联系方式：">
     {{uTel}}
    </el-form-item>
    <el-form-item label="收获地址：">
     {{address}}
    </el-form-item>
    <!-- <el-form-item label="具体地址：">
     {{locationDetail}}
    </el-form-item> -->
    <el-form-item label="发货备注：">
        <el-input type="textarea" placeholder="简单补充发货的备注信息..." v-model="u_remark" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">关闭</el-button>
    <el-button type="danger" @click="saveURemark">立即发货</el-button>
  </div>
</el-dialog>



    </div>
</template>

<script>
import * as rpConfig from '../../../rpConfig/constant'
import { HttpReq } from '../../service/server'
var Server = new HttpReq()
export default {
    data() {
        return {
            url: './static/vuetable.json',
            newsCenter: [],
            typeCenter: [],
            cur_page: 1,
            all_page: 1,
            multipleSelection: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false,
            setURemark: false,
            setNewGroup:false,
            uShowName: '',
            uTel: '',
            uId: 0,
            u_remark: '',
            u_typename:'',
            address:"",
            locationDetail:""
        }
    },
    created() {
        this.getData()
       
    },
    computed: {},
    methods: {
        handleCurrentChange(val) {
            this.cur_page = val
            this.getData()
        },
        getData() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/muser.Index/getPrizeUserByCon',
                {
                    page: self.cur_page,
                    a_type_id: self.select_cate,
                    keyword: self.select_word
                },
                function(res) {
                    self.newsCenter = res.data.data
                    self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10
                }
            )
        },
        expendToExcel(){
            let self = this
            let typeid=self.select_cate?self.select_cate:0
            let keyword=self.select_word?self.select_word:""
            ////console.log(rpConfig.API_URI + '/muser.Excel/expendPrizeUser?a_type_id='+typeid+"&keyword="+ keyword)
            Server._DOWNLOAD_FILE(rpConfig.API_URI + '/muser.Excel/expendPrizeUser?a_type_id='+typeid+"&keyword="+ keyword)

        },
        setUname(row) {
            return row.u_nickname + '(' + row.u_truename + ')'
        },
        setPosition(row){
            return row.u_province + '(' + row.u_city + ')'
        },
        setSendStau(row){
            return row.p_send_state==2?"已发货("+rpConfig.getTime(row.p_send_time)+")":"未发货"
        },
        closeEdit() {
            this.setURemark = false
        },
        moveGroup(row){
            this.setNewGroup=true
            this.u_typename=row.a_type_name
            this.uId=row.u_uid
        },
        saveURemark() {  
            let self = this
            Server._POST(rpConfig.API_URI + '/muser.Index/setSendRemark', {'item_id':self.uId,'uremark':self.u_remark}, 
                function(response) {
                    self.$message.success(response.msg)
                    self.closeEdit()
                    setTimeout(()=>{
                        self.getData()
                    },2000)
        
                })
        },
        filterTag(value, row) {
            return row.tag === value
        },

        handleEdit(row) {
            this.uShowName = row.u_nickname + '(' + row.u_truename + ')'
            this.uTel = row.u_tel
            this.setURemark = true
            this.uId = row.p_id
            this.address=row.u_province+row.u_city+row.u_area+row.u_location
           // this.locationDetail=row.u_location
            this.u_remark = row.p_send_remark
        },
        handleDelete(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/muser.Index/deleteUserItem',
                { item_id: [row.u_uid] },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        delAll() {
            const self = this,
                length = self.multipleSelection.length
            let delArr = []
            for (let i = 0; i < length; i++) {
                delArr.push(self.multipleSelection[i].u_uid)
            }
            if (delArr.length == 0) {
                self.$message.info('请选择要删除的记录')
            } else {
                Server._POST(
                    rpConfig.API_URI + '/muser.Index/deleteUserItem',
                    { item_id: delArr },
                    function(response) {
                        self.$message.success(response.msg)
                        self.getData()
                    }
                )
            }

            self.multipleSelection = []
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        }
    }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
  .item {
    margin-bottom: 18px;
    cursor: pointer;
  }
  .item:hover{
      color:#44b549
  }
  .curgroup{
      color:#44b549 
  }

</style>